Skip to content

Conversation

@Agamya-Samuel
Copy link
Collaborator

Fixes #92

Outreach Dashboard Integration

Overview

Integrates Wikimedia's Outreach Dashboard API into WikiContest, allowing users to link contests with Outreach Dashboard courses and view course data, participants, articles, and uploads directly within the contest view.

Features

  • Contest Linking: Add Outreach Dashboard URL when creating/editing contests
  • Multi-Tab Dashboard: Four tabs displaying:
    • Course: Information, timeline, status, and statistics
    • Users: Enrolled participants with contribution metrics
    • Articles: Tracked articles with edit statistics and view counts
    • Uploads: Media files with thumbnail previews and usage tracking
  • URL Normalization: Handles trailing paths (/home, /enroll, etc.)
  • Error Handling: User-friendly error messages with retry functionality
  • Real-time Data: Live fetching from Outreach Dashboard API

Technical Changes

Backend

  • Added outreach_dashboard_url column to contests table (Alembic migration)
  • New service layer (outreach_dashboard.py) with extensible architecture
  • Four API endpoints:
    • GET /api/contest/<id>/outreach-data
    • GET /api/contest/<id>/outreach-users
    • GET /api/contest/<id>/outreach-articles
    • GET /api/contest/<id>/outreach-uploads

Frontend

  • New OutreachDashboardTab component with four sub-tabs
  • Outreach Dashboard service for API communication
  • URL input field in contest creation/edit forms
  • Tab navigation in contest view (Overview / Outreach Dashboard)

- Add migration to add outreach_dashboard_url column to contests table
- Column is nullable to support optional Outreach Dashboard integration
- Migration includes upgrade and downgrade functions
- Add outreach_dashboard_url field to Contest model
- Include field in to_dict() serialization
- Update __init__ to accept outreach_dashboard_url parameter
- Create outreach_dashboard service module with URL parsing and validation
- Implement parse_outreach_url() to extract school and course_slug from URL
- Implement validate_outreach_url() to validate URL format
- Implement fetch_course_data() to fetch course data from Outreach Dashboard API
- Add error handling for network issues and API errors
- Export service functions in services __init__.py
- Add outreach_dashboard_url validation in create_contest endpoint
- Add outreach_dashboard_url validation in update_contest endpoint
- Create new endpoint GET /contest/<id>/outreach-data to fetch course data
- Pass outreach_dashboard_url to Contest constructor
- Handle cases where URL is missing or API call fails
- Create outreachDashboard service for API calls
- Implement fetchCourseData() to fetch course data from backend
- Use existing api axios instance for consistency
- Include error handling
…form

- Add outreach_dashboard_url input field to contest creation form
- Add URL validation for Outreach Dashboard URLs
- Include field in form submission payload
- Add helper text explaining URL format
- Reset field on form reset
- Create new component to display Outreach Dashboard course information
- Fetch course data using outreachDashboard service
- Display course details: title, description, school, type, dates
- Show course statistics: student count, edit count, article count, etc.
- Display status indicators: published, ended, closed, wiki_edits_enabled
- Include refresh button to reload data
- Handle loading and error states gracefully
- Add console logging for debugging contest creation
- Improve error message extraction from API responses
- Add better error logging for troubleshooting
- Add tab navigation when contest has outreach_dashboard_url
- Add Overview and Outreach Dashboard tabs
- Conditionally render OutreachDashboardTab component
- Add outreach_dashboard_url field to contest edit form
- Include field in contest update payload
- Fix template structure for proper tab display
- Show Overview content directly when no Outreach Dashboard URL
Refactor parse_outreach_url to use path splitting instead of regex pattern
matching. This allows the function to automatically ignore additional path
segments like /home, /enroll, /course.json, etc. that users might include
when copying URLs from the Outreach Dashboard website.

- Replace regex pattern matching with path splitting approach
- Extract only first 3 path segments (courses, school, course_slug)
- Ignore any additional path segments automatically
- Update documentation to reflect support for URLs with trailing paths
- Add helper functions _build_api_url() and _make_api_request() for reusable API interaction
- Refactor fetch_course_data() to use new helper functions
- Add fetch_course_users() function to fetch course users data
- Update service exports in __init__.py
- Improve error handling and code organization for future API endpoints
- Move specific outreach routes before general /<int:contest_id> route
- Add GET /contest/<id>/outreach-users endpoint for fetching course users
- Import fetch_course_users from outreach_dashboard service
- Fix Flask route matching issue that caused 'Endpoint not found' errors
- Add fetchCourseUsers() function to call backend outreach-users endpoint
- Import api service for HTTP requests
- Add proper error handling and validation for contestId parameter
- Return consistent response format matching other service functions
- Add nested tab navigation for Course and Users sections
- Implement users data fetching with loadUsersData() function
- Add users table displaying username, role, enrollment date, statistics
- Add loading and error states for users data
- Add refresh functionality for users data
- Update component to accept contestId prop for API calls
- Update OutreachDashboardTab component usage to pass contestId prop
- Enable users data fetching functionality in the component
…rd service

- Add fetch_course_articles() function to fetch articles data from API
- Handle articles.json endpoint with proper URL parsing
- Extract articles array from API response structure
- Add comprehensive error handling and validation
- Export fetch_course_articles in services __init__.py
- Add GET /contest/<id>/outreach-articles endpoint
- Import fetch_course_articles from outreach_dashboard service
- Place route before general /<int:contest_id> route for proper matching
- Return articles data with success/error response format
- Add fetchCourseArticles() function to call backend outreach-articles endpoint
- Include proper error handling and validation for contestId parameter
- Return consistent response format matching other service functions
- Use axios interceptor for automatic response data extraction
- Add third tab button for Articles section with file icon
- Implement articles data fetching with loadArticlesData() function
- Add articles table displaying title, wiki, namespace, statistics
- Show new article indicator, character counts, views, and contributors
- Add loading and error states for articles data
- Include refresh functionality and external link to articles
- Update component to import and use fetchCourseArticles service
…d service

- Add fetch_course_uploads() function to fetch uploads data from API
- Handle uploads.json endpoint with proper URL parsing
- Extract uploads array from API response structure
- Add comprehensive error handling and validation
- Export fetch_course_uploads in services __init__.py
- Add GET /contest/<id>/outreach-uploads endpoint
- Import fetch_course_uploads from outreach_dashboard service
- Place route before general /<int:contest_id> route for proper matching
- Return uploads data with success/error response format
- Add fetchCourseUploads() function to call backend outreach-uploads endpoint
- Include proper error handling and validation for contestId parameter
- Return consistent response format matching other service functions
- Use axios interceptor for automatic response data extraction
- Add fourth tab button for Uploads section with upload icon
- Implement uploads data fetching with loadUploadsData() function
- Add uploads table displaying file name, uploader, date, status, usage
- Show thumbnail previews with click-to-open functionality
- Display usage count badges and status indicators (Active/Deleted)
- Add loading and error states for uploads data
- Include refresh functionality and external links to Wikimedia Commons
- Add openUrl() helper function for secure external link handling
- Update component to import and use fetchCourseUploads service
- Changed @click handler from 'loadData' to 'loadCourseData' to match the actual function name
- Refresh button now properly reloads course data when clicked
@Agamya-Samuel
Copy link
Collaborator Author

Preview

2026-01-30.19-34-14.mp4

…scription documentation

- Deleted FIXES_APPLIED.md as it was no longer needed
- Introduced new documentation files: FEATURES_DOCUMENTATION.md and PROJECT_DESCRIPTION.md
- FEATURES_DOCUMENTATION.md provides an extensive overview of all platform features, including user management, contest management, and security protocols
- PROJECT_DESCRIPTION.md outlines the project’s purpose, key features, technology stack, and use cases
@Aditya0545 Aditya0545 merged commit fff8b06 into indictechcom:main Jan 30, 2026
2 checks passed
@Agamya-Samuel Agamya-Samuel self-assigned this Jan 30, 2026
@Agamya-Samuel Agamya-Samuel added feature High Priority Need to implemented asap labels Jan 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature High Priority Need to implemented asap

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI Integration with Outreach Dashboard for Live Participant Sync and Contribution Tracking

2 participants